<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>设置中心</el-breadcrumb-item>
          <el-breadcrumb-item>规则设置</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px;"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <div style="margin-bottom: 20px;">
          <el-alert title="玩法简介设置" type="success" :closable="false"></el-alert>
        </div>

        <!-- 表格 -->
        <el-form label-width="180px" label-position="right" style="width: 50%;">

          <el-form-item label="新澳门28玩法简介">
            <el-input v-model="formData.app_aozhou_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入新澳门28简介"/>
          </el-form-item>

          <el-form-item label="加拿大28玩法简介">
            <el-input v-model="formData.app_jianada_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入加拿大28简介"/>
          </el-form-item>

          <el-form-item label="澳门28玩法简介">
            <el-input v-model="formData.app_xinjiapo_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入澳门28玩法简介"/>
          </el-form-item>

          <el-form-item label="香港28玩法简介">
            <el-input v-model="formData.app_aomenjisu_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入香港28玩法简介"/>
          </el-form-item>
          <el-form-item label="亚洲28玩法简介">
            <el-input v-model="formData.app_az28_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入亚洲28玩法简介"/>
          </el-form-item>

          <el-form-item label="俄罗斯28玩法简介">
            <el-input v-model="formData.app_mxg28_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入俄罗斯28玩法简介"/>
          </el-form-item>

          <el-form-item label="新澳门六合彩玩法简介">
            <el-input v-model="formData.app_aomen_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入新澳门六合彩简介"/>
          </el-form-item>

          <el-form-item label="香港六合彩玩法简介">
            <el-input v-model="formData.app_xianggang_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入香港六合彩简介"/>
          </el-form-item>

          <el-form-item label="极速六合彩玩法简介">
            <el-input v-model="formData.app_jslhc_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="请输入极速六合彩简介"/>
          </el-form-item>

          <el-form-item label="韩国快3玩法简介">
            <el-input v-model="formData.app_hgks_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="韩国快3玩法简介"/>
          </el-form-item>
          <el-form-item label="韩国极速快3玩法简介">
            <el-input v-model="formData.app_hgjsks_rich_text" :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
                      placeholder="韩国极速快3玩法简介"/>
          </el-form-item>

          <!-- 新加 -->
          <el-form-item label="红包牛牛（10倍）玩法简介">
            <el-input
                v-model="formData.red_envelope_cow_10"
                :autosize="{ minRows: 5, maxRows: 20 }"
                type="textarea"
                placeholder="请输入红包牛牛（10倍）玩法简介"
            />
          </el-form-item>
          <el-form-item label="红包扫雷玩法简介">
            <el-input
                v-model="formData.red_envelope_mine_sweeping"
                :autosize="{ minRows: 5, maxRows: 20 }"
                type="textarea"
                placeholder="请输入红包扫雷玩法简介"
            />
          </el-form-item>
          <el-form-item label="红包二八杠玩法简介">
            <el-input
                v-model="formData.red_envelope_with_28_bars"
                :autosize="{ minRows: 5, maxRows: 20 }"
                type="textarea"
                placeholder="请输入红包二八杠玩法简介"
            />
          </el-form-item>
          <el-form-item label="红包接龙玩法简介">
            <el-input
                v-model="formData.red_envelope_dragon"
                :autosize="{ minRows: 5, maxRows: 20 }"
                type="textarea"
                placeholder="请输入红包接龙玩法简介"
            />
          </el-form-item>
          <el-form-item label="极速赛车规则简介">
            <el-input
                v-model="formData.app_jssc_rich_text"
                :autosize="{ minRows: 5, maxRows: 20 }"
                type="textarea"
                placeholder="请输入极速赛车规则简介"
            />
          </el-form-item>
          <el-form-item label="极速飞艇规则简介">
            <el-input
                v-model="formData.app_jsft_rich_text"
                :autosize="{ minRows: 5, maxRows: 20 }"
                type="textarea"
                placeholder="请输入极速飞艇规则简介"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存设置</el-button>
          </el-form-item>
        </el-form>

        <!-- 分页 -->
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

import {ref, reactive, onMounted, inject, getCurrentInstance} from 'vue'
import {success, error} from '@/common/tool/message.js'
import {request_post} from '@/common/axios/request.js'
import {ArrowRightBold} from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance();
const imgData = reactive({list: []})
const formData = reactive({
  app_az28_rich_text: '',
  app_mxg28_rich_text: '',
  app_jslhc_rich_text:'',
  app_hgjsks_rich_text:'',
  app_hgks_rich_text:'',
  app_aozhou_rich_text: '',
  app_jianada_rich_text: '',
  app_xinjiapo_rich_text: '',
  app_aomenjisu_rich_text: '',
  app_aomen_rich_text: '',
  app_xianggang_rich_text: '',
  red_envelope_cow_10: '',
  red_envelope_mine_sweeping: '',
  red_envelope_with_28_bars: '',
  red_envelope_dragon: '',
  app_jssc_rich_text:'',
  app_jsft_rich_text:''
})

onMounted(() => {
  adminConfigIndex()
})


function submitForm() {
  adminConfigCreate()
}


function adminConfigIndex() {
  request_post('/admin_config_index').then(res => {

    if (res.data.code == 200) {
      formData.app_hgjsks_rich_text =  res.data.data.app_hgjsks_rich_text
      formData.app_jslhc_rich_text =  res.data.data.app_jslhc_rich_text
      formData.app_hgks_rich_text = res.data.data.app_hgks_rich_text
      formData.app_aozhou_rich_text = res.data.data.app_aozhou_rich_text
      formData.app_jianada_rich_text = res.data.data.app_jianada_rich_text
      formData.app_aomen_rich_text = res.data.data.app_aomen_rich_text
      formData.app_xianggang_rich_text = res.data.data.app_xianggang_rich_text
      formData.app_xinjiapo_rich_text = res.data.data.app_xinjiapo_rich_text
      formData.app_aomenjisu_rich_text = res.data.data.app_aomenjisu_rich_text
      formData.red_envelope_cow_10 = res.data.data.red_envelope_cow_10
      formData.red_envelope_mine_sweeping = res.data.data.red_envelope_mine_sweeping
      formData.red_envelope_with_28_bars = res.data.data.red_envelope_with_28_bars
      formData.red_envelope_dragon = res.data.data.red_envelope_dragon
      formData.app_jsft_rich_text = res.data.data.app_jsft_rich_text
      formData.app_jssc_rich_text =  res.data.data.app_jssc_rich_text
      formData.app_az28_rich_text = res.data.data.app_az28_rich_text
      formData.app_mxg28_rich_text =  res.data.data.app_mxg28_rich_text
    } else {
      return error(res.data.msg)
    }
  })
}

// 添加配置
function adminConfigCreate() {

  request_post('/admin_config_create', formData).then(res => {
    console.log(res)
    if (res.data.code == 200) {
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}


function deleteUrl(index) {
  imgData.list.splice(index, 1)
}

const imageModel = inject('showImageModel')
const imageUrlArray = ref(inject('imageUrlArray'))

// 图片上传
function ImageUpload() {
  imageModel()
  imgData.list = imageUrlArray
}

</script>

<style></style>
